﻿@import '../../variables';
.users-wrapper {
  max-height: 65vh;
  overflow-y: auto;
  width: 100%;
  margin-bottom: 15px;
}

.card-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-right: 15px;
  padding-left: 15px;
}

.users {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  margin: 0px;
  padding: 0px 2px;
}

h1 {
  font-size: 1.75rem;
}

.user {
  @extend .btn;
  border: 0px;
  background-color: #d9d9d9;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  &:hover {
    color: #607d8b;
    background-color: #e6e6e6;
    left: 0.1em;
  }
  &.selected {
    background-color: #7eaacd !important;
    color: white;
  }
}

.users li > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.users li p {
  flex: 1;
  margin: 0px;
}

.users li.selected:hover {
  background-color: #bbd8dc !important;
  color: white;
}

.user-id {
  @extend .input-group-text;
  background-color: #607d8b;
  color: white;
  width: 2.5rem;
  border: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.delete-user {
  @extend .btn, .badge, .badge-secondary;
  height: 25px;
  width: 25px;
  margin-right: 10px;
}

@include media-breakpoint-down(sm) {
  .body {
    flex-direction: column-reverse !important;
  }
}

@include media-breakpoint-up(md) {
  .users-wrapper {
    max-height: 65vh;
    overflow-y: auto;
    margin-right: 1.25rem;
    margin-bottom: 0px;
    width: 100%;
  }
  .body {
    flex-direction: column;
  }
}
